<template>
	<view class="orderListView">
		<text>Your Order</text>
		<view class="listView">

			<uni-swipe-action v-if="orderList.length>0" v-for="item,index in orderList" :key="`order${index}`"
				class="swiperAction">
				<uni-swipe-action-item class="swiperActionOrder">
					<view class="swiperActionItem">
						<view class="top">
							<view class="left" :style="`background-image:url(./static/cake/${item.image});background-size: cover;`"></view>
							<!-- <image class="left" :src="autoimg(item.image)"></image> -->
							<view class="middle">
								<view class="title">
									{{item.text}}
								</view>
								<view class="des">
									{{item.des}}
								</view>
							</view>
							<view class="right">
								￥{{item.price}}
							</view>
						</view>
						<uni-number-box v-model="item.count"></uni-number-box>
					</view>
					<template v-slot:right>
						<view class="actionDel" @click="handleDel(item)"><text>删除</text></view>
					</template>
				</uni-swipe-action-item>
			</uni-swipe-action>
			<view :class="{blankTip:true,showBlank:orderList.length==0}">
				<image class="emptyOrder" src="../../static/icons/emptyOrder.png" mode="aspectFit"></image>
				<text>暂无订单</text>
			</view>

			<view v-if="orderList&&orderList.length>0" class="bottomCount"> 
				<view>总计：￥{{allMoney}}</view> 
				<view  :class="{shopButton:true,active:buttonPress,taped:buttonTaped}"
					@touchstart="handleTouch(1)" @touchend="handleTouch(0)">
					<div class="tick_mark"></div>
					<uni-icons :class="{icons:true,hide:buttonTaped}" type="shop-filled" size="30" color="#fff"></uni-icons>
				</view>
			</view>
			

		</view>

	</view>
</template>

<script setup>
	import {
		backgroundImg,
		autoimg,
		parseTime
	} from "@/utils/tool.js"
	import useSystemStore from '@/store/modules/system'
	import {
		computed,
		nextTick
	} from "vue";
	const emit = defineEmits(['closeCast'])
	const systemStore = useSystemStore()
	const {
		orderList
	} = storeToRefs(systemStore);
	//是否按钮被按住
	let buttonPress = ref(false)
	//是否按钮点击过
	let buttonTaped = ref(false)
	//总计金额
	let allMoney=computed(()=>{
		if(orderList.value&&orderList.value.length>0)
		{
			let _re= orderList.value.reduce((re,currentV)=>{
				let {count,price} =currentV 
				count=count||1 
				re+=count*price 
				return re
			},0)
			
			return _re
		}
		else
			return 0
	})


	//点击确认订单
	let handleTouch = async (type) => {
		if (type == 1) {
			//开始按住
			buttonPress.value = true
		} else {
			//松手提交
			buttonPress.value = false
			uni.showLoading({
				title: '提交中...'
			})
			let _re=await systemStore.confirmOrders(allMoney.value)
			 
			uni.hideLoading()
			buttonTaped.value = true
			nextTick(() => {
				setTimeout(() => {
					buttonTaped.value = false
					//清理订单
					orderList.value.length = 0
					emit('closeCast')
				}, 400)
			})
		}
	}
	//删除订单
	let handleDel = (item) => {
		systemStore.delOrder(item).then(data => uni.showToast({
			title: '删除成功！'
		}))
	}
</script>

<style lang="scss" scoped>
	.orderListView {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: $mainPadding;
		@include flex-teng(column, flex-start);

		.listView {
			width: 100%;
			overflow-y: scroll;
			flex: 1;
			position: relative;

		}

		.blankTip {
			@include flex-teng(column, flex-start);
			opacity: 0;
			transform: scale(0) translateY(-20px);
			transition: all 0.3 cubic-bezier(0.175, 0.885, 0.32, 1.275);

			.emptyOrder {
				margin-top: 20vh;
				width: 40vw;
			}

			&.showBlank {
				opacity: 1;
				transform: scale(1) translateY(0);
			}
		}

		.swiperAction {
			width: 100%;
			margin-top: $mainPadding;

			.swiperActionItem {
				//width: 100%;
				//height: 200rpx;
				border-radius: 40rpx 0 0 40rpx;
				backdrop-filter: blur(30px);
				background: rgba(255, 255, 255, 0.1);
				padding: 30rpx;

				.top {
					height: 100rpx;
					@include flex-teng(row);

					.left {
						width: 80rpx;
						height: 80rpx;
						border-radius: 20rpx;
						background-size: cover;
						background-repeat: no-repeat;
					}

					.middle {
						box-sizing: border-box;
						padding: 0 20rpx;
						width: calc(100% - 180rpx);
						@include flex-teng(column, flex-start, flex-start);

						.des {
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.right {
						width: 100rpx;
						font-size: $fontSize;
					}
				}

				.uni-numbox {
					justify-content: flex-end;
				}
			}

			.actionDel {
				width: 100rpx;
				border-radius: 0 40rpx 40rpx 0;
				backdrop-filter: blur(30px);
				border: 1px solid rgba(255, 255, 255, 0.18);
				background-color: red;
				@include flex-teng;
			}
		}

	}

	.bottomCount{
		position: fixed;
		bottom: calc($mainPadding + 100rpx);
		width: calc(100% - $mainPadding * 2); 
		@include flex-teng;
	}
	.shopButton {
		--size: 80rpx;
		--shadow: calc(var(--size) * .07) calc(var(--size) * .1);
		position: fixed;
		bottom: $mainPadding;
		left: calc(50% - 100rpx);
		//transform: translate(-50%,0);
		display: block;
		width: 200rpx;
		height: var(--size);

		transition: all 0.2s ease;
		background-image: linear-gradient(43deg, #c8b1b2 0%, #f0a6a7 46%, $mainColor 100%);
		border-radius: 0.5em;
		box-shadow: 0 var(--shadow) $mainColor;
		@include flex-teng;

		&.active {
			transform: scale(0.9);
		}

		&.taped {
			.tick_mark {

				&:before,
				&:after {
					transform: translate(0);
					opacity: 1;
				}
			}

		}

		.tick_mark {
			position: absolute;
			top: 0px;
			width: calc(var(--size) * .6);
			height: calc(var(--size) * .6);
			margin: 0 auto;

			transform: rotateZ(-40deg);

			&:before,
			&:after {
				content: "";
				position: absolute;
				background-color: #fff;
				border-radius: 12px;
				opacity: 0;
				transition: all 0.3s ease-in-out;
			}

			&:before {
				left: 0;
				bottom: 0;
				width: calc(var(--size) * .1);
				height: calc(var(--size) * .3);
				box-shadow: -2px 0 5px rgba(0, 0, 0, 0.23);
				transform: translateY(calc(var(--size) * -.68));
			}

			&:after {
				left: 0;
				bottom: 0;
				width: calc(var(--size) * .8);
				height: calc(var(--size) * .1);
				box-shadow: 0 3px 5px rgba(0, 0, 0, 0.23);
				transform: translateX(calc(var(--size) * .78));
			}
		}

		.icons {
			transition: all 0.3s ease-in-out;
			opacity: 1;

			&.hide {
				opacity: 0;
			}
		}
	}
</style>